<template>
	<view class="page">


		<view v-for="(item, index) in feedbacks" :key="index" @click="feedbackClick(item)">
			<view class="list-box">
				<view class="text-title">{{ item.remark }}</view>
				<view v-if="item.state == '0'" class="text-tips">您的反馈我们已经收到，我们会尽快处理并给您回复。感谢您的支持。</view>
				<view v-if="item.state == '1'" class="text-tips">{{ item.reply || '点击详情查看回复' }}</view>
				<view class="text-time">{{ item.createTime }}</view>
				<view :class="item.state == '0' ? 'state-grey' : 'state-green'">{{ item.stateName }}</view>
			</view>
		</view>

	</view>
</template>

<script>
import { leaveMsgList } from '../api/feedback.js'

export default {
	data() {
		return {
			feedbacks: [],
		}
	},
	onLoad() {
		this.getUserFeedback();
	},
	methods: {
		//获取用户意见反馈列表
		async getUserFeedback() {
			try {
				const { id } = this.$store.getters.userInfo;
				const pam = {
					createUser: id
				}
				const { data, success, msg } = await leaveMsgList(pam);
				if (!success) throw new Error(msg);
				this.feedbacks = data.records?.map(v => {
					v.state = (v.userReplyList?.length > 0) ? '1' : '0';
					v.stateName = (v.userReplyList?.length > 0) ? '已处理' : '未处理';
					return v;
				});
			} catch (error) {
				console.error(error);
				uni.showToast({
					title: error,
					icon: 'none'
				})
			}
		},
		feedbackClick(item) {

			uni.navigateTo({
				url: '../feedbackDetail/feedbackDetail?' + 'id=' + item.leaveMsgId,
				// url: '../feedbackDetail/feedbackDetail?' + 'feedback=' + JSON.stringify(item),
				success: res => { },
				fail: () => { },
				complete: () => { }
			});
		},


	}
}
</script>

<style lang="scss">
page {
	background-color: #F8F8F8;
}

.text-title {
	color: #303133;
	font-size: 30rpx;
	font-weight: bold;
	margin-right: 100rpx;
}

.text-time {
	color: #909193;
	font-size: 24rpx;
	margin-top: 24rpx;
}

.text-tips {
	color: #bcbcbc;
	font-size: 24rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin-top: 22rpx;
}

.state-green {
	position: absolute;
	right: 0;
	top: 0;
	color: #07C160;
	font-size: 28rpx;
	padding: 30rpx;
}

.state-grey {
	position: absolute;
	right: 0;
	padding: 30rpx;
	top: 0;
	color: #606266;
	font-size: 28rpx;
}



.list-box {
	position: relative;
	background-color: #FFFFFF;
	border-radius: 10rpx;
	margin-top: 30rpx;
	margin-left: 30rpx;
	margin-right: 30rpx;
	padding: 30rpx;
}



.flex-col {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
}
</style>
